<template>
  <div class="card mb-4 shadow-sm">
    <div class="card-body" style="border: blue 1px solid">
      <div style="margin: 2px">
        <h4 class="">{{course.name}}</h4>
        <p class="card-text">{{course.comment}}</p>
        <div class="d-flex justify-content-between align-items-center">
          <div class="btn-group">
            <button type="button" class="btn btn-sm btn-yellow btn-outline-secondary">书籍简介</button>
          </div>
          <br>
          <div class="text-muted" style="margin-top: 10px">
            <span class="badge badge-dark"><i class="fa fa-user" aria-hidden="true"></i>&nbsp;{{course.author}} </span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span class="badge badge-dark"><i class="fa fa-book" aria-hidden="true"></i>&nbsp;{{course.press}}</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span class="badge badge-dark">剩余:{{course.realNumber}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name:'course-card',
    props:{
      course:{},
    },
    data:function (){
      return{
      }
    },
  }
</script>
<style>
  .course h4 {
    font-size: 1.25rem;
    margin: 15px 0;
  }
  .course .text-muted .badge {
    font-size: 1rem;
  }
</style>